<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>智慧寻迹系统——人员轨迹追踪</title>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <link rel="stylesheet" href="css/demo2.css"/>
    <link href="css/bundle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/jquery-ui.min.css"/>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/bundle.js"></script>
    <script src="js/config.js"></script>
    <script src="js/flexible.js"></script>
    <script src="js/echarts.min.js"></script>
    <!--    <script src="./js/demo2.js"></script>-->
    <script src="js/layui/layui.js"></script>

</head>
<body>
<header>
    <h1>智慧寻迹系统——人员轨迹追踪</h1>
    <div class="showTime"></div>
    <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.querySelector(".showTime").innerHTML =
                "当前时间：" +
                y +
                "年" +
                mt +
                "月" +
                day +
                "日-" +
                h +
                "时" +
                m +
                "分" +
                s +
                "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
</header>
<!--页面主体部分-->
<section class="mainbox">
    <!--左侧区域-->
    <div class="column">
        <div class="panel" style="height: 2.7rem">
            <h2>重要场所选择</h2>
            <div class="layui-row">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 150px;">
                            <select id="secs" name="interest" class="layui-input">
                                <option value="0">全部场所</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width: 150px;">
                            <select id="sery" name="interest" class="layui-input">
                                <option value="0">全部人员</option>
                                <option value="1">学生</option>
                                <option value="2">教师</option>
                                <option value="3">其他</option>
                            </select>
                        </div>

                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" class="layui-input" id="datepicker" placeholder=" 选择时间 "
                               style="width: 310px"></li>
                    </div>
                </div>
            </div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel">
            <h2>重要场所人流量</h2>
            <div id="maxrll" class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel">
            <h2>场所人流量变化</h2>
            <div id="cxxx" class="chart"></div>
            <div class="panel-footer"></div>
        </div>
    </div>
    <!--中间区域-->
    <div class="column">
        <div class="no">
            <div class="no-hd">
                <ul id="ms1">
                    <li>10</li>
                    <li>19980</li>
                </ul>
            </div>
            <div class="no-bd">
                <ul id="ms2">
                    <li>目前学校场所</li>
                    <li>目前校内人员</li>
                </ul>
            </div>
        </div>
        <div class="map">
            <div id="map" class="chart">
            </div>
        </div>

    </div>
    <!--右侧区域-->
    <div class="column">
        <div class="panel" style="height: 2.7rem">
            <h2>人员行为轨迹</h2>>
            <div class="layui-row">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" class="layui-input" id="rygjtm" placeholder=" 选择时间 "
                               style="width: 310px"></li>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 220px;">
                            <input id="rygjun" type="text" autocomplete="off" placeholder="请输入用户名（学号、工号）"
                                   class="layui-input" style="width: 220px;">
                        </div>
                        <div class="layui-input-inline" style="width: 80px;">
                            <button id="btn" class="layui-btn layui-btn-normal" type="button">查询</button>
                        </div>

                    </div>
                </div>
            </div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel" style="height: 7.94rem">
            <h2>人员行为信息</h2>
            <div class="xwxx">
                <ul id="gjtb">

                </ul>
            </div>
            <div class="panel-footer"></div>
        </div>
    </div>

</section>
<div class="box"></div>
<script type="application/javascript">
    //初始化地图
    creeper.CreeperConfig.token = "eHk6NTU5OWI1ZmNlNzFjNDcwNzg4M2E3YTU5NDc1ZGQxODA=";
    var vectorMap = new creeper.VectorMap('map', config.wmapId, config.mapBaseUrl);
    // 初始化图表
    var maxrllChart = echarts.init(document.getElementById('maxrll')); //柱状图
    var cxxxChart = echarts.init(document.getElementById('cxxx')); //折线图
    var marker = []; //地图标记
    var host = "";
    var dzoom = 16;
    var dcenter = [113.1805481540033, 33.77401941866074];
    var sti = new Date();
    var rnd = 0;
    var mcslist = new Array();
    var geoJson = {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "coordinates": [],
                "type": "LineString"
            }
        }]
    };
    // 柱状图显示标题，图例和空的坐标轴
    maxrllChart.setOption({
        color: ["#2f89cf"],
        tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        // 修改图表的大小
        grid: {
            left: "0%",
            top: "10px",
            right: "0%",
            bottom: "4%",
            containLabel: true
        },
        xAxis: [
            {
                type: "category",
                data: [],
                axisTick: {
                    alignWithLabel: true
                },
                // 修改刻度标签 相关样式
                axisLabel: {
                    color: "rgba(255,255,255,.6) ",
                    fontSize: "12"
                },
                // 不显示x坐标轴的样式
                axisLine: {
                    show: false
                }
            }
        ],
        yAxis: [
            {
                type: "value",
                // 修改刻度标签 相关样式
                axisLabel: {
                    color: "rgba(255,255,255,.6) ",
                    fontSize: 12
                },
                // y轴的线条改为了 2像素
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 2
                    }
                },
                // y轴分割线的颜色
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                }
            }
        ],
        series: [
            {
                name: "人流量",
                type: "bar",
                barWidth: "35%",
                data: [],
                itemStyle: {
                    // 修改柱子圆角
                    barBorderRadius: 5
                }
            }
        ]
    });

    // 折线图显示标题，图例和空的坐标轴
    cxxxChart.setOption({
        tooltip: {
            trigger: "axis"
        },
        legend: {
            top: "0%",
            data: ["人流量"],
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },

        grid: {
            left: "10",
            top: "30",
            right: "10",
            bottom: "10",
            containLabel: true
        },
        xAxis: [
            {
                type: "category",
                boundaryGap: false,
                // x轴更换数据
                data: [],
                // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },
                // x轴线的颜色为   rgba(255,255,255,.2)
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.2)"
                    }
                }
            }
        ],
        yAxis: [
            {
                type: "value",
                axisTick: {show: false},
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },
                // 修改分割线的颜色
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                }
            }
        ],
        series: [
            {
                smooth: true,
                type: "line",
                // 填充颜色设置
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
                            },
                            {
                                offset: 0.8,
                                color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
                            }
                        ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)"
                },
                // 设置拐点
                symbol: "circle",
                // 拐点大小
                symbolSize: 8,
                // 开始不显示拐点， 鼠标经过显示
                showSymbol: false,
                // 设置拐点颜色以及边框
                itemStyle: {
                    color: "#0184d5",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12
                },
                data: []
            }
        ]
    });

    //等待标志
    maxrllChart.showLoading();
    cxxxChart.showLoading();

    //加载人流量信息
    function cxxxAjax(cd, tm, rd) {
        $.ajax({
            type: "get",
            // url: host + "/cxxx?lymc=美荟楼&stime=2020-04-02&stype=0",
            url: host + "/cxxx?lymc=" + cd + "&stime=" + tm + "&stype=" + rd,
            contentType: "application/json;charset=UTF-8",
            data: '',
            dataType: "json",
            success: function (data) {
                // alert(JSON.stringify(data));
                if (data.code == 200) {
                    cxxxChart.hideLoading();

                    //标记
                    if (cd == 0) {
                        if (geoJson.features[0].geometry.coordinates !== []&&vectorMap.getSource('lineSource')!=null) {
                            geoJson.features[0].geometry.coordinates = [];
                            vectorMap.getSource('lineSource').setData(geoJson);
                        }
                        ;
                        for (var i = 0; i < marker.length; i++) {
                            if (marker[i] != undefined) {
                                marker[i].remove();
                            }
                        }
                        ;
                        vectorMap.flyTo({
                            center: dcenter,
                            zoom: dzoom
                        });
                        $("#ms1").html("<li>10</li><li>19980</li>");
                        $("#ms2").html("<li>目前学校场所</li>" +
                            "<li>目前校内人员</li>");
                    } else {

                        if (geoJson.features[0].geometry.coordinates !== []) {
                            geoJson.features[0].geometry.coordinates = [];
                            vectorMap.getSource('lineSource').setData(geoJson);
                        }
                        ;
                        for (var i = 0; i < marker.length; i++) {
                            if (marker[i] != undefined) {
                                marker[i].remove();
                            }
                        }
                        ;
                        // 填入数据
                        cxxxChart.setOption({
                            xAxis: {
                                // data: ["1", "2", "3", "4", "5"]
                                data: data.data.date
                            },
                            series: [{
                                // 根据名字对应到相应的系列
                                name: '人流量',
                                // data: [150, 100, 13, 155, 180]
                                data: data.data.value
                            }]
                        });

                        $("#ms1").html("<li>" + data.data.rll + "</li><li>" + data.data.rll_all + "</li><li>" + data.data.rnd + "%</li>");
                        $("#ms2").html("<li>实时人流量</li>" +
                            "<li>今日总人流量</li>" +
                            "<li>场所容纳度</li>"
                        );
                        marker[0] = new creeper.Marker()
                            .setLngLat(data.data.lngLat)
                            .addTo(vectorMap);
                        vectorMap.flyTo({
                            center: data.data.lngLat,
                            zoom: 17
                        });
                    }
                    ;

                } else {
                    layui.use('layer', function () { //独立版的layer无需执行这一句
                        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
                        layer.msg("未找到相关信息")
                    });
                }
                ;
            },
            error: function (data) {
                alert("服务器错误")
            }
        });
    };

    // 异步加载人流量排名
    function maxrlAjax() {
        $.ajax({
            // 编写json格式，设置属性和值
            url: host + "/maxrl",
            contentType: "application/json;charset=UTF-8",
            data: '',
            dataType: "json",
            type: "get",
            success: function (data) {
                maxrllChart.hideLoading();
                // 填入数据
                maxrllChart.setOption({
                    xAxis: {
                        data: data.data.csname
                        // data: ["楼1", "楼2", "楼3", "楼4", "楼5", "楼6", "楼7"]
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '人流量',
                        // data: [60, 55, 54, 53, 20, 18, 15]
                        data: data.data.rll
                    }]
                });
            }
        });
    };

    // 异步加载场所列表
    function cslistAjax() {
        $.ajax({
            // 编写json格式，设置属性和值
            url: host + "/gjcs/cslist",
            contentType: "application/json;charset=UTF-8",
            data: '',
            dataType: "json",
            type: "get",
            success: function (data) {
                var re = data.data;
                $.each(re, function (key, value) { //每一行
                    var tr = "<option value=" + key + ">" + key + "</option>";
                    $("#secs").append(tr);
                    mcslist.push(key);
                });
            }
        });
    };

    function get_rygj_data(username, stime) {
        $.ajax({
            url: host + "/rygj?username=" + username + "&stime=" + stime,
            type: "get",
            data: {'id': 123},
            datatype: "json",
            success: function (data) {
                if (data.code == 200 && data.data.jccs.length !== 0) {
                    if (geoJson.features[0].geometry.coordinates !== []) {
                        geoJson.features[0].geometry.coordinates = [];
                        vectorMap.getSource('lineSource').setData(geoJson);
                    }
                    ;
                    // console.log(data);
                    var dd = data.data;
                    var len1 = dd.gjzb.length;
                    // alert(len1);
                    for (j = 0; j < len1; j++) {
                        geoJson.features[0].geometry.coordinates.push([dd.gjzb[j].lon, dd.gjzb[j].lat]);
                    }
                    ;
                    vectorMap.getSource('lineSource').setData(geoJson);
                    for (var i = 0; i < marker.length; i++) {
                        if (marker[i] != undefined) {
                            marker[i].remove();
                        }
                    }
                    ;
                    for (var i = 0; i < dd.cszb.length; i++) {
                        marker[i] = new creeper.Marker()
                            .setLngLat(dd.cszb[i])
                            .addTo(vectorMap);
                    }
                    ;
                    vectorMap.flyTo({
                        center: dcenter,
                        zoom: dzoom
                    });
                    var tr = "";
                    var tr1 = "";
                    $.each(dd.jccs, function (index, value) { //每一行
                        value.date = new Date(value.date).format("yyyy-MM-dd hh:mm:ss");
                        // value.crsj=$.datepicker.formatDate("yyyy-mm-dd HH:mm:ss", new Date(value.crsj));
                        if (value.jcbz == 1) {
                            value.jcbz = "进入";
                        } else {
                            value.jcbz = "外出";
                        }

                        if (value.wz2 !== null) {
                            tr1 = value.date + " - " + value.jcbz + " - " + value.wz1 + " - " + value.wz2;
                        }else {
                            tr1 = value.date + " - " + value.jcbz + " - " + value.wz1;
                        }
                        tr = tr + "<li><p>" + tr1 + "</p></li>";
                        $("#gjtb").html(tr);
                    });
                    $("#ms1").html("<li>" + dd.num + "</li><li>" + dd.name + "</li><li>" + dd.cszb.length + "</li>");
                    $("#ms2").html("<li>用户名</li>" +
                        "<li>姓名</li>" +
                        "<li>到过场所数量</li>"
                    );
                } else {
                    layer.msg("未找到相关信息");
                }

            }
        })

    };

    Date.prototype.format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    };

    $(function () {
        vectorMap.flyTo({
            center: dcenter,
            zoom: dzoom
        });
        vectorMap.on('load', function () {
            vectorMap.addSource('lineSource', {
                type: 'geojson',
                data: geoJson
            });
            vectorMap.addLayer({
                type: 'line',
                source: 'lineSource',
                id: 'lineLayer',
                paint: {
                    'line-color': 'red',
                    'line-width': 3
                },
                layout: {
                    'line-cap': 'round',
                    'line-join': 'round'
                }
            });
        });
        vectorMap.on('click', function (e) {
            var features = vectorMap.queryRenderedFeatures(e.point);

            if (features.length > 0) {
                var feature = features[0];
                if (feature.properties.name == "筑美楼A座" || feature.properties.name == "筑美楼B座" || feature.properties.name == "筑美楼C座" || feature.properties.name == "筑美楼D座") {
                    feature.properties.name = "筑美楼";
                } else {
                    if (feature.properties.name == "筑善楼A座" || feature.properties.name == "筑善楼B座" || feature.properties.name == "筑善楼C座") {
                        feature.properties.name = "筑善楼";
                    }
                }
                ;
                $.each(mcslist, function (index, value) {
                    if (feature.properties.name == value) {
                        // alert(feature.properties.id);
                        cxxxAjax(feature.properties.name, $("#datepicker").val(), $("#sery").val());
                        $("#secs").val(feature.properties.name);
                    }
                });
            }
            ;
        });
        var st0 = sti.format("yyyy-MM-dd");
        var st1 = sti.format("yyyy-MM-dd hh:mm:ss");
        var st = st0 + " 00:00:00 - " + st1;
        cslistAjax();
        maxrlAjax();
        cxxxAjax(0, st, 0);

        //日期选择器
        layui.use(['util', 'laydate', 'layer'], function () {
            var util = layui.util
                , laydate = layui.laydate
                , $ = layui.$
                , layer = layui.layer;
            laydate.render({
                elem: '#datepicker'
                , type: 'datetime'
                , range: true
                , done: function (value, date, date2) {
                    cxxxAjax($("#secs").val(), date.year + "-" + date.month + "-" + date.date + " " + date.hours + ":" + date.minutes + ":" + date.seconds + " - " + date2.year + "-" + date2.month + "-" + date2.date + " " + date2.hours + ":" + date2.minutes + ":" + date2.seconds, $("#sery").val())
                }
            });
            laydate.render({
                elem: '#rygjtm'
                , type: 'datetime'
                , range: true
            });
        });
        $("#datepicker").val(st);
        // .change(function () {
        //     cxxxAjax($("#secs").val(), $(this).val(), $("#sery").val());
        // });
        $("#secs").change(function () {
            cxxxAjax($(this).val(), $("#datepicker").val(), $("#sery").val());
        });
        $("#sery").change(function () {
            cxxxAjax($("#secs").val(), $("#datepicker").val(), $(this).val());
        });
        $('#btn').on('click', function () {
            get_rygj_data($("#rygjun").val(), $("#rygjtm").val());
        });

    });
</script>


</body>
</html>
